<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>设备绑定</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <link rel="stylesheet" href="/static/weui.css"/>
    <script src="/static/weui.min.js"></script>
    <script src="/static/vue.min.js"></script>
    <script src="/static/axios.min.js"></script>


</head>
<body>
<div id="vue">
    <div class="page icons js_show">
        <!--            等待绑定-->
        <div v-if="state === '0'">
            <div class="weui-icon" style="text-align: center;margin-top: 100px;margin-bottom: 50px">
                <div class="weui_icon_area">
                    <i class="weui-icon-info weui-icon_msg"></i>
                </div>
                <h3 class="icon-box__title" style="margin-top: 20px">绑定设备</h3>
                <p class="icon-box__desc" style="margin-top: 5px">编号:&nbsp;&nbsp;{{message}}</p>
            </div>
            <div class="button-sp-area">
                <a href="javascript:" class="weui-btn weui-btn_primary" v-on:click="confirm">确定</a>
                <a href="javascript:" class="weui-btn weui-btn_default" v-on:click="cancel">取消</a>
            </div>
        </div>

    </div>

    <!--            已绑定-->
    <div v-if="state === '1'">
        <div class="weui-icon" style="text-align: center;margin-top: 100px;margin-bottom: 50px">

            <i class="weui-icon-success weui-icon_msg"></i>
            <h3 class="icon-box__title" style="margin-top: 20px">绑定成功</h3>
            <p class="icon-box__desc" style="margin-top: 5px">编号:&nbsp;&nbsp;{{message}}</p>
        </div>
    </div>
    <!--            已取消-->
    <div v-if="state === '2'">
        <div class="weui-icon" style="text-align: center;margin-top: 100px;margin-bottom: 50px">

            <i class="weui-icon-warn weui-icon_msg-primary"></i>
            <h3 class="icon-box__title" style="margin-top: 20px">绑定取消</h3>
            <p class="icon-box__desc" style="margin-top: 5px">编号:&nbsp;&nbsp;{{message}}</p>
        </div>

        <!--            已过期-->
        <div v-if="state === '-1'">
            <div class="weui-icon" style="text-align: center;margin-top: 100px;margin-bottom: 50px">

                <i class="weui-icon-warn weui-icon_msg"></i>
                <h3 class="icon-box__title" style="margin-top: 20px">绑定过期</h3>
                <p class="icon-box__desc" style="margin-top: 5px">编号:&nbsp;&nbsp;{{message}}</p>
            </div>
        </div>

    </div>

</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#vue',
        data: {
            message: '${sn}',
            uid: '${uid}',
            //0准备中1,已成功，2已取消，-1,过期
            state: '${state}'
        },
        methods: {
            confirm: function () {
                axios.get('/device/confirm/' + this.uid)
                    .then(res => (this.state = '1'));

            },
            cancel: function () {
                axios.get('/device/cancel/' + this.uid)
                    .then(res => (this.state = '2'));
            }
        }
    });
</script>
</html>